<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/css/bootstrap.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../lib/jquery/jQuery.js"></script>
    <script src="../lib/js/bootstrap.js"></script>
    <script src="../js/index.js"></script>
    <title>首页</title>
</head>

<body>
    <!-- 大屏状态下nav -->
    <div class="huge hidden-sm hidden-xs">
        <div id="topbar">
            <div class="container">
                <div class="l">
                    <p>在线时间08:30-21:30</p>
                    <p>欢迎访问家电在线商城</p>
                </div>
                <div class="r">
                    <a href="../temlates/login.html">登录</a>
                    <a href="../temlates/register.html">注册</a>
                    <a href="../temlates/cart.html" class="cart"><i class="glyphicon glyphicon-shopping-cart"></i><span
                            class="badge">21</span>
                        <div class="shopcart">
                            <div class="blank"></div>
                            <div class="slt">
                                <div class="img"><img src="../media/g1.jpg" alt=""></div>
                                <div class="detail">
                                    <h5>X280笔记本电脑20KFA002CD</h5>
                                    <p>2 x 9999 ¥</p>
                                </div>
                                <span>X</span>
                            </div>
                            <div class="slt">
                                <div class="img"><img src="../media/g1.jpg" alt=""></div>
                                <div class="detail">
                                    <h5>X280笔记本电脑20KFA002CD</h5>
                                    <p>2 x 9999 ¥</p>
                                </div>
                                <span>X</span>
                            </div>
                            <div class="slt">
                                <div class="img"><img src="../media/g1.jpg" alt=""></div>
                                <div class="detail">
                                    <h5>X280笔记本电脑20KFA002CD</h5>
                                    <p>2 x 9999 ¥</p>
                                </div>
                                <span>X</span>
                            </div>
                            <h4>小计¥ 29999</h4>
                            <button class="look">查看购物车</button>
                            <button class="pay">结算</button>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <nav>
            <div class="container">
                <img src="../media/logo.png" alt="">
                <ul>
                    <li><a href="" class="active">首页</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">台式机</a></li>
                    <li><a href="">外设系列</a></li>
                    <li><a href="">售后服务</a></li>
                </ul>
                <form action="">
                    <input type="text" placeholder="游戏笔记本">
                    <button type="submit">提交</button>
                </form>
            </div>
        </nav>
    </div>



    <!-- 小屏幕下nav -->
    <div class="lettle hidden-lg hidden-md">
        <div class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="btn"><i class="glyphicon glyphicon-align-justify"></i> </div>
                <div class="logo"><img src="../media/logo.png" alt="" width="110" class="img-responsive"></div>
                <div class="search"><i class="glyphicon glyphicon-search" data-toggle="modal" data-target="#search"></i>
                </div>
            </div>
            <!-- 左侧隐藏框 -->
            <div class="slideRight">
                <div class="s_head">
                    <!-- 未登录状态 -->
                    <!-- <a href="" class="../templates/login.html">登录</a>
                    <a href="../templates/register.html" class="register">注册</a> -->
                    <!-- /未登陆状态 -->
                    <!-- 已登陆状态 -->
                    <a href="../temlates/user.html" class="touxiang"><img src="../media/touxiang.jpg" width="50"
                            alt=""><span>欢迎渣渣灰欢迎渣渣灰欢迎渣渣灰</span> </a>
                    <a href="../temlates/cart.html" class="has_cart"><i class="glyphicon glyphicon-shopping-cart"></i></a>
                    <!-- /已登陆状态 -->
                </div>
                <div class="s_logo"><img src="../media/logo.png" height="50" alt=""></div>
                <ul class="s_list">
                    <li><a href="">首页</a></li>
                    <li><a href="../temlates/cart.html">我的购物车</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">台式机</a></li>
                    <li><a href="">外设系列</a></li>
                    <li><a href="">售后服务</a></li>

                </ul>
            </div>
        </div>
    </div>
    <input type="hidden" name="" id="slider_num" value="2">

    <div class="wrapper">
        <div class="sort hidden-sm hidden-xs">
            <!-- <div class="container"> -->
            <table>
                <th>全部分类</th>
                <tr>
                    <td><a href="">游戏笔记本</a></td>
                </tr>
                <tr>
                    <td><a href="">台式笔记本</a></td>
                </tr>
                <tr>
                    <td><a href="">办公键盘</a></td>
                </tr>
                <tr>
                    <td><a href="">游戏鼠标键/耳机</a></td>
                </tr>
                <tr>
                    <td><a href="">高清摄像头</a></td>
                </tr>
                <tr>
                    <td><a href="">VR专区</a></td>
                </tr>
                <tr>
                    <td><a href="">驱动下载</a></td>
                </tr>
                <tr>
                    <td><a href="">保修政策</a></td>
                </tr>
            </table>
            <!-- </div> -->
        </div>
        <!-- 轮播 -->
        <a href="http:www.jd.com" class="slider"
            style="background: url('../media/slide2.jpg') no-repeat center; background-size: cover;"></a>
        <a href="http:www.baidu.com" class="slider"
            style="background: url('../media/slide1.jpg') no-repeat center; background-size: cover;"></a>
    </div>

    <div class="fixnav hidden-sm hidden-xs">
        <div class="fix_tel"><i class="glyphicon glyphicon-earphone"></i>
            <p>18337252813</p>
        </div>
        <div class="bling"><i class="glyphicon glyphicon-bell"></i></div>
        <div class="reback"><i class="glyphicon glyphicon-upload"></i></div>
    </div>

    <!-- /轮播 -->

    <!-- 促销 -->
    <div class="promote">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-3">
                    <div class="thumbnail">
                        <img src="../media/promote.jpg" alt="">
                    </div>
                </div>
                <div class="col-lg-3 col-sm-3">
                    <div class="thumbnail">
                        <img src="../media/promote1.jpg" alt="">
                    </div>
                </div>
                <div class="col-lg-3 col-sm-3">
                    <div class="thumbnail">
                        <img src="../media/promote2.jpg" alt="">
                    </div>
                </div>
                <div class="col-lg-3 col-sm-3">
                    <div class="thumbnail">
                        <img src="../media/promote.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 促销 -->

    <!-- 精选单品推荐 -->
    <div class="recommend">
        <div class="container">
            <h3>精选单品推荐</h3>
            <div class="row">
                <div class="col-sm-2 col-lg-2">
                    <div class="thumbnail">
                        <img src="../media/recommend.jpg" alt="">
                        <h5>联想拯救者</h5>
                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                    </div>

                </div>
                <div class="col-sm-2 col-lg-2">
                    <div class="thumbnail">
                        <img src="../media/recommend.jpg" alt="">
                        <h5>联想拯救者</h5>
                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                    </div>

                </div>
                <div class="col-sm-2 col-lg-2">
                    <div class="thumbnail">
                        <img src="../media/recommend.jpg" alt="">
                        <h5>联想拯救者</h5>
                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                    </div>

                </div>
                <div class="col-sm-2 col-lg-2">
                    <div class="thumbnail">
                        <img src="../media/recommend.jpg" alt="">
                        <h5>联想拯救者</h5>
                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                    </div>

                </div>
                <div class="col-sm-2 col-lg-2">
                    <div class="thumbnail">
                        <img src="../media/recommend.jpg" alt="">
                        <h5>联想拯救者</h5>
                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                    </div>

                </div>
                <div class="col-sm-2 col-lg-2">
                    <div class="thumbnail">
                        <img src="../media/recommend.jpg" alt="">
                        <h5>联想拯救者</h5>
                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!-- /精选单品推荐 -->

    <!-- goods_body -->
    <div class="goods_body">
        <div class="laptop">
            <div class="frame">
                <div class="container">
                    <div class="title">
                        <h4>笔记本/游戏本</h4>
                        <div class="more"><a href="">MORE+</a></div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">

                        <div class="col-lg-4 col-md-4">
                            <div class="thumbnail">
                                <img src="../media/lapBanner.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8">
                            <div class="row">
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-8 col-md-8">
                            <div class="row">
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="desktop">
            <div class="frame">
                <div class="container">
                    <div class="title">
                        <h4>台式机/一体机</h4>
                        <div class="more"><a href="">MORE+</a></div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">

                        <div class="col-lg-4 col-md-4">
                            <div class="thumbnail">
                                <img src="../media/desk.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8">
                            <div class="row">
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-8 col-md-8">
                            <div class="row">
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="device">
            <div class="frame">
                <div class="container">
                    <div class="title">
                        <h4>外设系列</h4>
                        <div class="more"><a href="">MORE+</a></div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">

                        <div class="col-lg-4 col-md-4">
                            <div class="thumbnail">
                                <img src="../media/device.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8">
                            <div class="row">
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-4 col-md-4">
                            <div class="thumbnail">
                                <img src="../media/device.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8">
                            <div class="row">
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="../media/lap1.jpg" alt="">
                                        <h5>14英寸四核sdasd独显asdasd</h5>
                                        <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                        <span>¥10099</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hot">
            <div class="frame">
                <div class="container">
                    <div class="title">
                        <h4>热评产品</h4>
                        <div class="more"><a href="">MORE+</a></div>
                    </div>
                </div>
                <div class="container">

                    <div class="row">
                        <div class="col-lg-2 col-sm-2">
                            <div class="thumbnail">
                                <img src="../media/lap1.jpg" alt="">
                                <h5>14英寸四核sdasd独显asdasd</h5>
                                <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                <span>¥10099</span>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-2">
                            <div class="thumbnail">
                                <img src="../media/lap1.jpg" alt="">
                                <h5>14英寸四核sdasd独显asdasd</h5>
                                <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                <span>¥10099</span>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-2">
                            <div class="thumbnail">
                                <img src="../media/lap1.jpg" alt="">
                                <h5>14英寸四核sdasd独显asdasd</h5>
                                <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                <span>¥10099</span>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-2">
                            <div class="thumbnail">
                                <img src="../media/lap1.jpg" alt="">
                                <h5>14英寸四核sdasd独显asdasd</h5>
                                <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                <span>¥10099</span>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-2">
                            <div class="thumbnail">
                                <img src="../media/lap1.jpg" alt="">
                                <h5>14英寸四核sdasd独显asdasd</h5>
                                <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                <span>¥10099</span>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-2">
                            <div class="thumbnail">
                                <img src="../media/lap1.jpg" alt="">
                                <h5>14英寸四核sdasd独显asdasd</h5>
                                <p>i5-8300H/Window这个要试一试我也怒知道什么时候才能有足够的asdasd财力</p>
                                <span>¥10099</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
       
        <footer>
            <div class="top hidden-sm hidden-xs">
                <div class="container">
                    <dl>
                        <dd>三年免费保修</dd>
                        <dd>三年免费保修</dd>
                        <dd>三年免费保修</dd>
                        <dd>三年免费保修</dd>
                        <dd>三年免费保修</dd>
                    </dl>
                    <table class="table">
                           
                            <thead>
                              <tr>
                                <th>帮助中心</th>
                                <th>服务支持</th>
                                <th>关于我们</th>
                                <th>新闻资讯</th>
                                <th>线下门店</th>
                              </tr>
                            </thead>
                            <tbody>
                             <tr>
                                 <td><a href="#">购物指南</a></td>
                                 <td><a href="#">保修政策</a></td>
                                 <td><a href="#">公司介绍</a></td>
                                 <td><a href="#">营业执照</a></td>
                                 <td><a href="#">法律申明</a></td>
                             </tr>
                             <tr>
                                 <td><a href="#">支付方式</a></td>
                                 <td><a href="#">服务标准</a></td>
                                 <td><a href="#">加入我们</a></td>
                                 <td><a href="#">新闻动态</a></td>
                                 <td><a href="#">隐私政策</a></td>
                             </tr>
                             <tr>
                                 <td><a href="#">配送方式</a></td>
                                 <td><a href="#">退换货政策</a></td>
                                 <td><a href="#">联系我们</a></td>
                                 <td><a href="#">版权申明</a></td>
                                 <td><a href="#">服务条款</a></td>
                             </tr>
                             
                            </tbody>
                     </table>

                     <div class="contact">
                         <div class="wechat">
                             <p>微信公众号</p>
                             <img src="../media/wechat.jpg" alt="">
                         </div>
                         <div class="phone">
                             <h4>4006-999-999</h4>
                            <h6>周一至周日 8:00-18:00</h6>
                            <a href="#">24小时在线服务</a>
                         </div>
                     </div>
                </div>

            </div>
            <div class="bottom">
                <div class="container">
                    <p>版权所有2056-2086 数码家电在线商城模板  沪ICP备000000000号-0</p>
                </div>
            </div>
        </footer>



        <!-- /goods_body -->





        <!-- 模态框（Modal） -->
        <div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            搜索
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-addon glyphicon glyphicon-search"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary">
                            提交更改
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <!-- /模态框 -->
</body>

</html>